<script lang="ts" setup>
import type { TablePaginationConfig, DrawerProps } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import type { TableColumnType, TableProps, SelectProps } from 'ant-design-vue';
import { $t } from '@vben/locales';

import type { CodelabsAlgorithm, CodelabsAlgorithmResponse } from './types.ts';
import type { ComponentSetting, ComponentSettingResponse } from '../../uctoo/component_setting/types.ts';
import { onMounted, reactive, ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import editform from './editform.vue';
import { useRoute } from 'vue-router';
import { removeEmpty } from '#/utils/common';
import { uctoo_codelabs_algorithm, uctoo_component_setting } from '#/store';
import { useRepo } from 'pinia-orm';
import { useAxiosRepo } from '@pinia-orm/axios';
import { buildPrismaWhere } from '#/utils/prismaUtils';

type Key = string | number;

// 获取当前路由信息
const route = useRoute();
// 获取查询字符串部分
let queryParam = reactive({ ...route.query });
const componentSettingData = ref<ComponentSetting[]>([]);
const activeKey = ref(['']); // 默认折叠面板关闭
const isCollapsed = computed(() => activeKey.value.includes('1')); // 用于控制按钮文本
let componentSettingQueryParam = ref("uctoo_codelabs_algorithm");
const columnsData = [
{ dataIndex: 'id', key: 'id', title: $t('database_column.uctoo.codelabs_algorithm.id'), resizable: true },
{ dataIndex: 'command_name', key: 'command_name', title: $t('database_column.uctoo.codelabs_algorithm.command_name'), resizable: true },
{ dataIndex: 'algorithm_code', key: 'algorithm_code', title: $t('database_column.uctoo.codelabs_algorithm.algorithm_code'), resizable: true },
{ dataIndex: 'filename', key: 'filename', title: $t('database_column.uctoo.codelabs_algorithm.filename'), resizable: true },
{ dataIndex: 'filepath', key: 'filepath', title: $t('database_column.uctoo.codelabs_algorithm.filepath'), resizable: true },
{ dataIndex: 'template_url', key: 'template_url', title: $t('database_column.uctoo.codelabs_algorithm.template_url'), resizable: true },
{ dataIndex: 'opensource', key: 'opensource', title: $t('database_column.uctoo.codelabs_algorithm.opensource'), resizable: true },
{ dataIndex: 'author', key: 'author', title: $t('database_column.uctoo.codelabs_algorithm.author'), resizable: true },
{ dataIndex: 'author_url', key: 'author_url', title: $t('database_column.uctoo.codelabs_algorithm.author_url'), resizable: true },
{ dataIndex: 'user_id', key: 'user_id', title: $t('database_column.uctoo.codelabs_algorithm.user_id'), resizable: true },
{ dataIndex: 'tags', key: 'tags', title: $t('database_column.uctoo.codelabs_algorithm.tags'), resizable: true },
{ dataIndex: 'docs', key: 'docs', title: $t('database_column.uctoo.codelabs_algorithm.docs'), resizable: true },
{ dataIndex: 'images', key: 'images', title: $t('database_column.uctoo.codelabs_algorithm.images'), resizable: true },
{ dataIndex: 'description', key: 'description', title: $t('database_column.uctoo.codelabs_algorithm.description'), resizable: true },
{ dataIndex: 'price', key: 'price', title: $t('database_column.uctoo.codelabs_algorithm.price'), resizable: true },
{ dataIndex: 'status', key: 'status', title: $t('database_column.uctoo.codelabs_algorithm.status'), resizable: true },
{ dataIndex: 'arguments', key: 'arguments', title: $t('database_column.uctoo.codelabs_algorithm.arguments'), resizable: true },
{ dataIndex: 'creator', key: 'creator', title: $t('database_column.uctoo.codelabs_algorithm.creator'), resizable: true },
{ dataIndex: 'created_at', key: 'created_at', title: $t('database_column.uctoo.codelabs_algorithm.created_at'), resizable: true },
{ dataIndex: 'updated_at', key: 'updated_at', title: $t('database_column.uctoo.codelabs_algorithm.updated_at'), resizable: true },
{ dataIndex: 'deleted_at', key: 'deleted_at', title: $t('database_column.uctoo.codelabs_algorithm.deleted_at'), resizable: true },
{ dataIndex: 'action', key: 'action', fixed: 'right' as 'right', title:$t('operate')  },
];
const columns = ref<TableColumnsType>(columnsData);

const selectedColumns = ref(
  (columns.value as any[])
    .filter((col) => 'dataIndex' in col)
    .map(col => col.dataIndex)
);

const handleColumnChange = () => {}; 
let filteredColumns = computed(() => {
  return (columns.value as any[]).filter((col) => {
    return 'dataIndex' in col && selectedColumns.value.includes(col.dataIndex as string);
  }) as TableColumnsType;
});
const dataSource = ref<CodelabsAlgorithm[]>([]);
const loading = ref(false);
const pagination = reactive<TablePaginationConfig>({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
});

const modalVisible = ref(false);
const modalMode = ref<'add' | 'edit'>('add');
const currentRecord = ref<CodelabsAlgorithm | null>(null);
const isRecycleBin = ref(false);
const checkedHardDelete = ref(false); 

// 定义搜索表单的接口
interface SearchFormState {
id:string | null;
command_name:string | null;
algorithm_code:string | null;
filename:string | null;
filepath:string | null;
template_url:string | null;
opensource:number | null;
author:string | null;
author_url:string | null;
user_id:string | null;
tags:string | null;
docs:string | null;
images:string | null;
description:string | null;
price:number | null;
status:number | null;
arguments:string | null;
creator:string | null;
created_at: [string, string] | null;
updated_at: [string, string] | null;
deleted_at: [string, string] | null;
}

// 修改 searchForm 的定义，添加类型
const searchForm = reactive<SearchFormState>({
id: null,
command_name: null,
algorithm_code: null,
filename: null,
filepath: null,
template_url: null,
opensource: null,
author: null,
author_url: null,
user_id: null,
tags: null,
docs: null,
images: null,
description: null,
price: null,
status: null,
arguments: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
});

interface SearchOperatorState {
id: string | null;
command_name: string | null;
algorithm_code: string | null;
filename: string | null;
filepath: string | null;
template_url: string | null;
opensource: string | null;
author: string | null;
author_url: string | null;
user_id: string | null;
tags: string | null;
docs: string | null;
images: string | null;
description: string | null;
price: string | null;
status: string | null;
arguments: string | null;
creator: string | null;
created_at: string | null;
updated_at: string | null;
deleted_at: string | null;
}

const SearchOperator = reactive<SearchOperatorState>({
id: null,
command_name: null,
algorithm_code: null,
filename: null,
filepath: null,
template_url: null,
opensource: null,
author: null,
author_url: null,
user_id: null,
tags: null,
docs: null,
images: null,
description: null,
price: null,
status: null,
arguments: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
});


const ORDEROPTIONS = ['id','command_name','algorithm_code','filename','filepath','template_url','opensource','author','author_url','user_id','tags','docs','images','description','price','status','arguments','creator','created_at','updated_at','deleted_at',];


const SearchOperatorOptions = ref<SelectProps['options']>([
  { value: 'equals', label: '='},{value: 'not', label: '!='},{value: 'lt',label: '<' },
  { value: 'lte', label: '<='  },{value: 'gt',  label: '>' },{value: 'gte',label: '>=' },
  { value: 'in',  label: 'in'  },{value: 'contains', label: `${$t('page.contains')}` }]);
const selectedAscItems = ref<string[]>([]);
const selectedDescItems = ref<string[]>([]);

const availableOptions = computed(() => {
  return ORDEROPTIONS
    .filter(option => 
      !selectedAscItems.value.includes(option) && 
      !selectedDescItems.value.includes(option)
    )
    .map(option => ({ value: option }));
});

// 计算属性，用于生成 queryParamSort 字符串
const queryParamSort = computed(() => {
  const ascItems = selectedAscItems.value.map(item => item).join(',');
  const descItems = selectedDescItems.value.map(item => `-${item}`).join(',');
  return `${[ascItems, descItems].filter(Boolean).join(',')}`;
});

const resetSearch = () => {
searchForm.id=null;
searchForm.command_name=null;
searchForm.algorithm_code=null;
searchForm.filename=null;
searchForm.filepath=null;
searchForm.template_url=null;
searchForm.opensource=null;
searchForm.author=null;
searchForm.author_url=null;
searchForm.user_id=null;
searchForm.tags=null;
searchForm.docs=null;
searchForm.images=null;
searchForm.description=null;
searchForm.price=null;
searchForm.status=null;
searchForm.arguments=null;
searchForm.creator=null;
searchForm.created_at = null;
searchForm.updated_at = null;
searchForm.deleted_at = null;

  pagination.current = 1;
  searchStatus.value = false;
  queryParam.filter = null;
  fetchData();
};


const searchStatus = ref(false);
const handleSearch = () => {
  pagination.current = 1;
  searchStatus.value = true;
  fetchData();
};
const fetchData = async () => {
  loading.value = true;
  try {
    // 构建查询参数
    let params: Record<string, any> = {};
    if(searchStatus.value){
         if (searchForm.id) params.id =  searchForm.id ;
   if (searchForm.command_name) params.command_name =  searchForm.command_name ;
   if (searchForm.algorithm_code) params.algorithm_code =  searchForm.algorithm_code ;
   if (searchForm.filename) params.filename =  searchForm.filename ;
   if (searchForm.filepath) params.filepath =  searchForm.filepath ;
   if (searchForm.template_url) params.template_url =  searchForm.template_url ;
   if (searchForm.opensource) params.opensource =  Number(searchForm.opensource) ;
   if (searchForm.author) params.author =  searchForm.author ;
   if (searchForm.author_url) params.author_url =  searchForm.author_url ;
   if (searchForm.user_id) params.user_id =  searchForm.user_id ;
   if (searchForm.tags) params.tags =  searchForm.tags ;
   if (searchForm.docs) params.docs =  searchForm.docs ;
   if (searchForm.images) params.images =  searchForm.images ;
   if (searchForm.description) params.description =  searchForm.description ;
   if (searchForm.price) params.price =  Number(searchForm.price) ;
   if (searchForm.status) params.status =  Number(searchForm.status) ;
   if (searchForm.arguments) params.arguments =  searchForm.arguments ;
   if (searchForm.creator) params.creator =  searchForm.creator ;
   if (searchForm.created_at) params.created_at = searchForm.created_at;
   if (searchForm.updated_at) params.updated_at = searchForm.updated_at;
   if (searchForm.deleted_at) params.deleted_at = searchForm.deleted_at;


       const where = buildPrismaWhere(params, SearchOperator);
       queryParam.filter = JSON.stringify(where);
    }else{  //后台地址跳转查询场景，从url获取查询参数
      // 获取查询字符串部分
    }
    if(queryParamSort.value){
      queryParam.sort = queryParamSort.value;
    }
    // 根据回收站状态动态修改条件
    if (isRecycleBin.value) {
      // 添加到回收站：要求 deleted_at 不为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { not: null }
      });
    } else {
      // 不在回收站：要求 deleted_at 为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { equals: null }
      });
    }
    const result = await useAxiosRepo(uctoo_codelabs_algorithm).api().getuctooCodelabsAlgorithmList(
      (pagination.current || 1) - 1, 
      pagination.pageSize || 10,
      queryParam);
    const res = result.response.data as unknown as CodelabsAlgorithmResponse;
    dataSource.value = isRecycleBin.value
      ? res.codelabsAlgorithms.filter((codelabsAlgorithm) => codelabsAlgorithm.deleted_at !== null)
      : res.codelabsAlgorithms.filter((codelabsAlgorithm) => codelabsAlgorithm.deleted_at === null);
    pagination.total = res.totalCount;
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
  //查询控件配置
  try {
    // 构建查询参数
    const params: Record<string, any> = {};
    params.filter = JSON.stringify({"table_name":{"equals":componentSettingQueryParam.value}});
    const result = await useAxiosRepo(uctoo_component_setting).api().getuctooComponentSettingList(
      0,
      10,
      params,
    );
    const res = result.response.data as unknown as ComponentSettingResponse;
    componentSettingData.value = res.componentSettings;
    if(componentSettingData.value[0]){
      selectedColumns.value = JSON.parse(componentSettingData.value[0].selected_table_column ?? '[]');
    }
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
};

const handleTableChange = (pag: TablePaginationConfig) => {
  pagination.current = pag.current || 1;
  pagination.pageSize = pag.pageSize || 10;
  fetchData();
};

const handleAdd = () => {
  modalMode.value = 'add';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleRecyle = (checked: boolean) => {
  console.log(checked);
  pagination.current = 1;
  isRecycleBin.value = checked;
  fetchData();
};

const handleRestore = async (record: CodelabsAlgorithm) => {
  try {
    await useAxiosRepo(uctoo_codelabs_algorithm).api().edituctooCodelabsAlgorithm({ deleted_at: '0', id: record.id });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleMultiRestore = async () => {
  try {
    await useAxiosRepo(uctoo_codelabs_algorithm).api().edituctooCodelabsAlgorithm({ deleted_at: '0', ids: JSON.stringify(rowSelectState.selectedRowKeys) });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleEdit = (record: CodelabsAlgorithm) => {
  modalMode.value = 'edit';
  currentRecord.value = record;
  modalVisible.value = true;
};

const handleMultiEdit = () => {
  modalMode.value = 'edit';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleDelete = async (record: CodelabsAlgorithm) => {
  try {
    if(checkedHardDelete){
      await useAxiosRepo(uctoo_codelabs_algorithm).api().deleteuctooCodelabsAlgorithm({id:record.id, force:1});
    }else{
      await useAxiosRepo(uctoo_codelabs_algorithm).api().deleteuctooCodelabsAlgorithm({id:record.id});
    }
    checkedHardDelete.value = false;
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleMultiDelete = async () => {
  try {
    await useAxiosRepo(uctoo_codelabs_algorithm).api().deleteuctooCodelabsAlgorithm({ids: JSON.stringify(rowSelectState.selectedRowKeys)});
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleSuccess = () => {
  modalVisible.value = false;
  fetchData();
};

const rowSelectState = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
const hasSelected = computed(() => rowSelectState.selectedRowKeys.length > 0);

const onSelectChange = (selectedRowKeys: Key[]) => {
  rowSelectState.selectedRowKeys = selectedRowKeys;
};


const placement = ref<DrawerProps['placement']>('left');
const open = ref<boolean>(false);

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

const onSetting = async () => {
    try {
      if(componentSettingData.value[0]){
        componentSettingData.value[0].selected_table_column = JSON.stringify(selectedColumns.value);
      }
      await useAxiosRepo(uctoo_component_setting).api().edituctooComponentSetting(removeEmpty(componentSettingData.value[0]));
        message.success($t('page.SettingSuccess'));
    } catch {
      message.error($t('page.SettingFailed'));
    }
  open.value = false;
};

const handleResizeColumn = (w:number, col:{ width: number }) => {
  col.width = w;
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="p-4">
    <a-card :bordered="false">
    <!-- 搜索表单 -->
    <a-form layout="inline" class="mb-4 flex flex-wrap gap-4">
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.id')">
          <a-input
            v-model:value="searchForm.id"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.command_name')">
          <a-input
            v-model:value="searchForm.command_name"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.command_name')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.command_name" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.algorithm_code')">
          <a-input
            v-model:value="searchForm.algorithm_code"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.algorithm_code')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.algorithm_code" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>

        <!-- 折叠面板，包含更多控件 -->
    <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end" :ghost="true">
      <a-collapse-panel key="1" :header="isCollapsed ? $t('page.Expand'): $t('page.Collapse')" >
          <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.filename')">
          <a-input
            v-model:value="searchForm.filename"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.filename')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.filename" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.filepath')">
          <a-input
            v-model:value="searchForm.filepath"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.filepath')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.filepath" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.template_url')">
          <a-input
            v-model:value="searchForm.template_url"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.template_url')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.template_url" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.opensource')">
          <a-input
            v-model:value="searchForm.opensource"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.opensource')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.opensource" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.author')">
          <a-input
            v-model:value="searchForm.author"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.author')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.author" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.author_url')">
          <a-input
            v-model:value="searchForm.author_url"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.author_url')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.author_url" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.user_id')">
          <a-input
            v-model:value="searchForm.user_id"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.user_id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.user_id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.tags')">
          <a-input
            v-model:value="searchForm.tags"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.tags')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.tags" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.docs')">
          <a-input
            v-model:value="searchForm.docs"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.docs')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.docs" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.images')">
          <a-input
            v-model:value="searchForm.images"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.images')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.images" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.description')">
          <a-input
            v-model:value="searchForm.description"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.description')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.description" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.price')">
          <a-input
            v-model:value="searchForm.price"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.price')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.price" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.status')">
          <a-input
            v-model:value="searchForm.status"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.status')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.status" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.arguments')">
          <a-input
            v-model:value="searchForm.arguments"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.arguments')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.arguments" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.creator')">
          <a-input
            v-model:value="searchForm.creator"
            :placeholder="$t('database_column.uctoo.codelabs_algorithm.creator')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.creator" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.created_at')">
            <a-select v-model:value="SearchOperator.created_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.created_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.codelabs_algorithm.created_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.updated_at')">
            <a-select v-model:value="SearchOperator.updated_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.updated_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.codelabs_algorithm.updated_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.codelabs_algorithm.deleted_at')">
            <a-select v-model:value="SearchOperator.deleted_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.deleted_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.codelabs_algorithm.deleted_at')" >
            </a-date-picker>
          </a-form-item>
 
        </a-collapse-panel>
      </a-collapse>
      <div class="mutually-exclusive-select">
    <a-select
      v-model:value="selectedAscItems"
      mode="multiple"
      :placeholder="$t('page.OrderASC')"
      style="width: 200px; margin-right: 8px"
      :options="availableOptions"
    ></a-select>
    <a-select
      v-model:value="selectedDescItems"
      mode="multiple"
      :placeholder="$t('page.OrderDESC')"
      style="width: 200px"
      :options="availableOptions"
    ></a-select>
  </div>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{$t('page.Search')}}</a-button>
            <a-button @click="resetSearch">{{$t('page.resetSearch')}}</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <div class="mb-4 flex items-center justify-between">
        <div>
          <a-switch
            v-model:checked="isRecycleBin"
            :checked-children="$t('page.RecycleBin')"
            :un-checked-children="$t('page.RecycleBin')"
            @change="handleRecyle"
          />
        </div>
        <div>
          
          
              <template v-if="isRecycleBin">
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiRestore">
                  {{$t('page.Restore')}}
                </a-button>
              </template>
              <template v-else>
                <a-space>
                <a-popconfirm :disabled="!hasSelected" :loading="rowSelectState.loading"
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleMultiDelete"
                >
                  <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading">
                    {{$t('page.Delete')}}
                  </a-button>
                </a-popconfirm>
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiEdit" >
                    {{$t('page.Edit')}}
                  </a-button>
                </a-space>
              </template>
        </div>
        <a-button type="primary" @click="showDrawer">{{$t('page.Setting')}}</a-button>
        <a-button type="primary" @click="handleAdd">{{$t('page.Add')}}</a-button>
      </div>
  <a-drawer :width="500" title="" :placement="placement" :open="open" @close="onClose">
    <template #extra>
      <a-button style="margin-right: 8px" @click="onClose">{{$t('page.Cancel')}}</a-button>
      <a-button type="primary" @click="onSetting">{{$t('page.Submit')}}</a-button>
    </template>
    <a-checkbox-group v-model:value="selectedColumns" @change="handleColumnChange">
      <a-row>
        <a-col v-for="col in columnsData" :key="col.dataIndex" :span="8">
          <a-checkbox :value="col.dataIndex">{{ col.title }}</a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </a-drawer>
      
      <a-table rowKey="id"
        :columns="filteredColumns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 'max-content'  }"
        @resizeColumn="handleResizeColumn"
        :row-selection="{ selectedRowKeys: rowSelectState.selectedRowKeys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <template v-if="isRecycleBin">
                <a class="hover:text-blue-500" @click="handleRestore(record)"
                  >{{$t('page.Restore')}}</a
                >
              </template>
              <template v-else>
                <a class="hover:text-blue-500" @click="handleEdit(record)"
                  >{{$t('page.Edit')}}</a
                >
                <a-popconfirm
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleDelete(record)"
                >
                <template #description>
                  <p>{{$t('page.checkedHardDelete')}}</p>
                  <a-checkbox v-model:checked="checkedHardDelete">{{$t('page.HardDelete')}}</a-checkbox>
                </template>
                
                  <a class="hover:text-blue-500">{{$t('page.Delete')}}</a>
                </a-popconfirm>
              </template>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <editform
      v-model:visible="modalVisible"
      :mode="modalMode"
      :record="currentRecord"
      :componentSettingData="componentSettingData"
      :ids="rowSelectState.selectedRowKeys as string[]"
      @success="handleSuccess"
    />
  </div>
</template>
